<template>
  <div style="margin: 20px;">
    <div class="stat">
      <!-- 统计 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple item">
            <div><svg-icon icon-class="stat_user" class="icon" /></div>
            <div class="stat-box">
              <div class="stat-title">{{ statTitle.user }}</div>
              <div class="stat-num">{{ stat.user }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple item">
            <div><svg-icon icon-class="stat_ditu" class="icon" /></div>
            <div class="stat-box">
              <div class="stat-title">{{ statTitle.device }}</div>
              <div class="stat-num">{{ stat.device }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple item">
            <div><svg-icon icon-class="stat_online" class="icon" /></div>
            <div class="stat-box">
              <div class="stat-title">{{ statTitle.online }}</div>
              <div class="stat-num">{{ stat.online }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple item">
            <div><svg-icon icon-class="stat_offline" class="icon" /></div>
            <div class="stat-box">
              <div class="stat-title">{{ statTitle.offline }}</div>
              <div class="stat-num">{{ stat.offline }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="list">
      <!-- 上报列表 -->
      <el-table :data="tableData" border style="width: 100%" @row-click="clickRow">
        <el-table-column prop="device_id" label="设备ID" width="80" align="center" show-overflow-tooltip />
        <el-table-column prop="device_name" label="设备别名" width="150" align="center" show-overflow-tooltip />
        <el-table-column prop="itime" label="上报时间" align="center" width="160" />
        <el-table-column prop="trends_data" label="上报内容" align="center">
          <template slot-scope="scope">
            <el-tag type="primary" disable-transitions
              style="margin-right:10px">{{ "IMEI:"+JSON.parse(scope.row.trends_data).imei }}</el-tag>
            <el-tag type="success" disable-transitions
              style="margin-right:10px">{{ "电量:"+power(JSON.parse(scope.row.trends_data).v)}}</el-tag>
            <el-tag type="danger" disable-transitions
              style="margin-right:10px">{{ "坐标:"+JSON.parse(scope.row.trends_data).gps }}</el-tag>
            <el-tag type="warning" disable-transitions>雷达检测</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 翻页 -->
    <el-pagination class="pagination" background layout="total,prev, pager,next" :total="total" :page-size="pageSize"
      :hide-on-single-page="hide" @current-change="handleCurrentChange" />
  </div>
</template>

<script>
  import {
    dataBase
  } from '@/api/database.js'
  export default {
    name: 'Dashboard',
    data() {
      return {
        loading: false,
        // 统计
        statTitle: {
          user: '用户数量',
          device: '设备总数',
          online: '设备在线',
          offline: '设备离线'
        },
        stat: {},
        lableData: ['设备ID', '上报时间', '上报地址'],
        tableData: [],
        total: 0,
        pageSize: 10,
        currPage: 1,
        hide: true
      }
    },
    created() {
      this.getDataBase(1)
    },
    methods: {
      power(v) {
        const p = (v * 1 - 800) / 240 * 100
        if (p <= 0) {
          return 0 + '%'
        } else if (p >= 100) {
          return 100 + '%'
        } else {
          return p.toFixed(1) + '%'
        }
      },
      // 初始数据
      getDataBase(num) {
        this.loading = true
        dataBase({
          page: this.currPage,
          size: this.pageSize
        }).then(res => {
          // console.log(res)
          if (res.code == 1) {
            this.stat = res.data.stat
            this.tableData = res.data.data.list
            this.total = res.data.total_num
            this.loading = false
          }
        })
      },
      // 当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.currPage = val
        this.getDataBase(val)
      },
      // 当某一行被点击时触发地图-展示当前设备上报定位
      clickRow(row, column, event) {
        // console.log(row)
        var device_id = row.device_id
        this.$router.push({
          path: '/map/index.vue',
          name: 'Map',
          query: {
            lng: row.lng,
            lat: row.lat,
            itime: row.itime,
            gpsinfo: JSON.parse(row.trends_data)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  // 统计
  .stat {
    margin: 0;
  }

  .bg-purple {
    background: #fff;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 100px;
  }

  .item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-width: 210px;
    padding: 20px;
  }

  .icon {
    width: 68px;
    height: 68px;
  }

  .stat-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .stat-title {
    margin-bottom: 10px;
    font-size: 28px;
    font-weight: lighter;
  }

  .stat-num {
    font-size: 28px;
  }

  // 上报列表
  .list {
    margin: 20px 0;
  }

  .pagination {
    margin-top: 20px;
    text-align: right;
  }
</style>